<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
</head>
<style>
    .uls{
        padding: 0;
        overflow-y: scroll !important;
    }
    .uls li{
        list-style: none;
    }
    .right{
       text-align: right;
    }
    .kind{
        background-color: blueviolet;
        color: white;
        font-size: 22px;
    }
    .elses{
        background-color:rgb(153, 217, 236);
        color: white;
        font-size: 22px;
    }
</style>
<script src="../public/jquery3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<body>
    <div class="container">
        <div class="row">
            <h1 class="col-md-12 col-md-offset-4">欢迎 &nbsp;<span> <%= userss %></span>  &nbsp;来友好交流</h1>
        </div>
        <div class="col-md-12 col-md-offset-2">
            <ul style="border: 1px solid red; width: 1000px;height: 575px; overflow: hidden;" class="uls">
                
            </ul>
            <textarea name="" id="" cols="30" rows="10" placeholder="请输入发送信息" style="width: 1000px; height: 205px; margin-top: -11px;outline: none;resize:none;"></textarea>
            <button style="position: relative;top: -52px;left: 875px;width: 125px;height: 47px;font-size: 22px;line-height: 22px;text-align: center;" class="btns">发送</button>
        </div>
    </div>
    <script src="socket.io/socket.io.js"></script>
    <script>
        let socket=io();
        $(".btns").click(function(){
            socket.emit('chats',{msg:$('textarea').val(),user:$('span').html()});
        })
        $("textarea").keydown((e)=>{
        if(e.keyCode==13){
            // 发送数据 socket.emit('和后台保持一致的事件',{k:v数据})
            socket.emit('chat',{msg:$('textarea').val(),user:$('span').html()});
        }
    })
    $(".btns").click(function(){
            // 发送数据 socket.emit('和后台保持一致的事件',{k:v数据})
            socket.emit('chat',{msg:$('textarea').val(),user:$('span').html()});
    })
    socket.on('send',(msg)=>{
				var tag=$('<li></li>')
                
				if(msg.user==$('span').html()){
					tag.addClass('right')
                    tag.html(`<span class="kind">${msg.msg}说:${msg.user}</span><br>`);
				}else{
                    tag.html(`<span class="elses">${msg.user}说:${msg.msg}</span>`);
                }
				$('ul').append(tag);
				// scrollTop控制滚动条滚动距离
				$('ul').scrollTop(($('li').height())*$('ul li').length)
			})
    </script>
        
</body>
</html>